<template>
	<view class="content">
		<view class="content-top">

			<!-- 轮播图 -->
			<view class='swiper'>
				<swiper class="swiper-c">
					<swiper-item class="have-none" v-for="(item,index) in formData.atlas">
						<image class='' :src='item' mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 轮播图end -->

			<view class='cell-group'>
				<view class='cell-item goods-top'>
					<view class='cell-item-hd' style="position: relative;">
						<view class='cell-hd-title goods-price red-price'>{{formData.price}}
							<text style="font-size: 13px;padding-left: 5px;">积分</text>
						</view>

					</view>
					<view class='cell-item-ft'>
						<view class="fenxi">
							<image src="/static/images/fenxiang.png"></image>
							<button class="btn activ-share-but" open-type="share" style="padding: 0;margin: 0;background: none;">
								<text style="padding-left: 5px;color: #333333;">分享</text>
							</button>
						</view>
					</view>
				</view>

				<view class='cell-item goods-details'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>
							<view class="color-3 fsz29 cell-hd-title-view">
								{{formData.title}}
							</view>
							<text class="color-9 fsz24 ">
								{{formData.subtitle}}
							</text>
						</view>
					</view>
					<view class='cell-item-ft'>
						<image class='cell-ft-next icon' @click="goShare()" src=''></image>
					</view>
				</view>
			</view>



			<view class="goods-content">
				<view class="goods-content-c">
					<view style="text-align: center;color: #333333;font-size: 12px;">商品详情</view>
					<view class="goods-detail">
						<view class="comment-none">
							<jyf-parser :html="formData.content" ref="article"></jyf-parser>
						</view>
					</view>


				</view>
			</view>
		</view>

		<!-- 弹出层 -->
		<lvv-popup position="bottom" ref="lvvpopref">
			<view style="width: 100%;max-height: 804upx;background: #FFFFFF;position: absolute;left:0;bottom: 0;">
				<view class="pop-c">
					<view class="pop-t" style="padding: 26rpx;">
						<view class='goods-img'>
							<image :src='formData.image' mode='aspectFill'></image>
						</view>
						<view class='goods-information'>
							<view class='pop-goods-price red-price' style="margin-bottom: 6rpx;">{{formData.price}} 积分</view>
							<view class="fsz24 color-9">
								库存{{formData.stock}}
							</view>
						</view>
						<view class='close-btn' @click="toclose()">
							<image src='/static/image/close.png'></image>
						</view>
					</view>
					<scroll-view class="pop-m" scroll-y="true" style="max-height: 560upx;">
						<view class="goods-number">
							<text class="pop-m-title">数量</text>
							<view class="pop-m-bd-in">
								<uni-number-box :min="1" :max="formData.stock" :value="1" @change="bindChange"></uni-number-box>
							</view>
						</view>
					</scroll-view>
					<view class="pop-b">
						<button class='btn btn-square btn-b btn-all' hover-class="btn-hover2" @click="clickHandle()">确定</button>
					</view>
				</view>
			</view>
		</lvv-popup>
		<!-- 弹出层end -->

		<div id="qrCode" ref="qrCodeDiv"></div>
		<!-- 底部按钮 -->
		<view class="goods-bottom">
			<view class="bottom-wrapper">
				<view class="goods-bottom-ic" @click="redirectCart">
					<image class="icon" src="/static/images/fenxiang.png" mode="" style="width: 20px;"></image>
					<button class="btn activ-share-but" open-type="share" style="   padding: 0px;
		    margin: 0px;
		    background: none;
		    width: auto;
		    height: auto;
		    color: #999999;
		    font-size: 12p;
		    transform: inherit;">
						<view style="font-size: 12px;">转发</view>
					</button>
				</view>
				<view class="goods-bottom-ic" @click="hanldIndex()">
					<image class="icon" src="/static/images/dianpu_no.png" mode=""></image>
					<view style="font-size: 12px;">首页</view>
				</view>
			</view>

			<button class='btn btn-square btn-b' @click="toshow()" hover-class="btn-hover2" style="width: 442upx;margin: 0;">立即兑换</button>
		</view>
		<!-- 底部按钮end -->



	</view>
</template>

<script>
	import lvvPopup from '../../../components/lvv-popup/lvv-popup.vue';
	import uniNumberBox from "../../../components/uni-number-box/uni-number-box.vue";

	import jyfParser from "@/components/jyf-parser/jyf-parser";
	export default {
		components: {
			lvvPopup,
			uniNumberBox,
			jyfParser

		},
		data() {
			return {
				formData: "",
				stocknum: 1,//库存
				id:"",
				
			}
		},
		onLoad(option) {
			if (option.address) {
				
				this.id = option.address;
				this.getActivityInfo()
			}
		},
		onShow() {
		},
		computed: {

		},
		onReachBottom() {

		},
		methods: {
			//筛选条件弹出窗口
			toshow() {
				this.$refs.lvvpopref.show();
				this.screents = false;
				this.screentc = true;
			},
			// 立即购买
			clickHandle() {
				this.formData.stocknum = this.stocknum;
				let aa = this.formData;
				let bb = JSON.stringify(aa)
				let cc = encodeURIComponent(bb);
				
				uni.navigateTo({url:`/pages/member/IntegralMall/placeOrder?address=${cc}`})
			
				this.$refs.lvvpopref.close();
			},
			//首页
			hanldIndex() {
				uni.switchTab({
					url: '/pages/main/main'
				})
			},
			//库存
			bindChange(e) {
				this.stocknum = e;
			},
			getActivityInfo() {
				const params = {
					id: this.id,
				}
			
				this.$http.get('/shop/row', {
					params: params
				}).then((response) => {
					const res = response.data;
					console.log(res)
					if (res.code == 0) {
					this.formData = res.data;
					console.log(this.formData)
					this.formData.content = this.formData.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;width: 100%;" '); //图片自适应问题
					
					} else {
					}
				})
			}
			
		},
		watch: {

		},
			onShareAppMessage() {
			return {
				title: this.formData.title,
				imageUrl: this.formData.atlas[0],
				path: `/pages/member/IntegralMall/shopInfo?address=${this.formData.id}` 
			}
			console.log(path)
		},

	}
</script>

<style scoped>
	.swiper {
		height: 750upx;
	}
	.concent>>>.goods-specs, .goods-number{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.concent>>> .uni-numbox__minus{
		width: 53upx !important;
		font-size: 44upx !important;
		background-color: #F5F5F5 !important;
	}
	.concent>>>.uni-numbox__minus, .uni-numbox__plus{
		width: 53upx !important;
	font-size: 44upx !important;
	background-color: #F5F5F5 !important;
	line-height: 44upx !important;
	}

	.goods-top {
		border-bottom: 0;
	}

	.goods-top .goods-price {
		font-weight: bold;
		font-size: 21px;
	}

	.cost-price {
		font-size: 28upx !important;
		bottom: -10upx;
		color: #999;
		text-decoration: line-through;
	}

	.goods-top .cell-item-ft {
		font-size: 20upx;
		color: #666;
	}

	.goods-details {
		padding-top: 0;
	}

	.goods-details .cell-hd-title {
		width: 620upx;
	}

	.goods-details .cell-hd-title .cell-hd-title-view {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.goods-details .cell-hd-title .cell-hd-title-view:last-child {
		margin-top: 10upx;
	}

	.goods-details .cell-item-ft {
		top: 24upx;
	}

	.goods-title-item .cell-item-hd {
		min-width: 60upx;
		color: #666;
		font-size: 24upx;
	}

	.goods-title-item .cell-item-bd {
		color: #333;
		font-size: 24upx;
		display: block;
	}

	.goods-title-item .cell-bd-text {
		bottom: 0;
	}

	.cell-bd-view {
		position: relative;
		overflow: hidden;
		margin-bottom: 8upx;
	}

	.cell-bd-view:last-child {
		margin-bottom: 0;
	}

	.goods-title-item-ic {
		width: 22upx;
		height: 22upx;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		/* #ifdef MP-ALIPAY */
		background-size: 100% 100%;
		/* #endif */
	}

	.cell-bd-view .cell-bd-text {
		margin-left: 30upx;
	}

	.goods-content {
		margin-top: 20upx;
		background-color: #fff;
		padding: 20upx 0;
	}

	.goods-content-c {
		margin-top: 20upx;
	}

	.goods-parameter {
		padding: 10upx 26upx;
		min-height: 600rpx;
	}

	.goods-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 49px !important;
	}

	.goods-bottom,
	.pop-b {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		height: 90upx;
		width: 100%;
		overflow: hidden;
		box-shadow: 0 0 20upx #ccc;

	}

	.goods-bottom .btn {
		height: 100%;
		width: 29%;
		float: left;
	}

	.goods-bottom-ic {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		color: #999999;
	}

	.goods-bottom-ic image {
		width: 23px;
		height: 22px;
	}

	.goods-bottom-ic .icon {
		position: relative;
		top: 6upx;
		/* #ifdef MP-ALIPAY */
		background-size: 100% 100%;
		/* #endif */
	}

	.btn-b {
		background-color: #FF5F49;
		font-size: 16px;
		line-height: 49px !important;
	}

	.goods-bottom .btn-g {
		color: #333;
		background-color: #D9D9D9;
	}

	.goods-parameter .cell-item {
		border-bottom: none;
		margin-left: 0;
	}

	.goods-parameter .cell-item-hd {
		color: #333;
		font-size: 24upx;
	}

	.goods-parameter .cell-item-bd {
		color: #999;
	}

	.goods-parameter .cell-item-bd .cell-bd-text {
		bottom: 0;
	}

	.goods-parameter .cell-bd-text {
		margin-left: 0;
	}

	.pop-t {
		position: relative;
		padding: 30upx 26upx;
		border-bottom: 2upx solid #f3f3f3;
	}

	.goods-img {
		width: 160upx;
		height: 160upx;
		position: absolute;
		top: -20upx;
		background-color: #fff;
		border-radius: 6upx;
		border: 2upx solid #fff;

	}

	.goods-img image {
		height: 100%;
		width: 100%;
	}

	.goods-information {
		width: 420upx;
		display: inline-block;
		margin-left: 180upx;
	}

	.pop-goods-name {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: block;
		font-size: 24upx;
		margin-bottom: 20upx;
	}

	.pop-goods-price {
		font-size: 30upx;
	}

	.close-btn {
		width: 40upx;
		height: 40upx;
		border-radius: 50%;
		display: inline-block;
		position: absolute;
		right: 30upx;
	}

	.close-btn image {
		width: 100%;
		height: 100%;
	}

	.pop-m {
		font-size: 28upx;
		margin-bottom: 90upx;
	}

	.goods-specs,
	.goods-number {
		padding: 26upx;
		border-top: 1px solid #f3f3f3;
	}

	.goods-specs:first-child {
		border: none;
	}

	.pop-m-title {
		margin-right: 10upx;
		color: #666;
	}

	.pop-m-bd {
		overflow: hidden;
		margin-top: 10upx;
	}

	.pop-m-item {
		display: inline-block;
		float: left;
		padding: 6upx 16upx;
		background-color: #fff;
		color: #333;
		margin-right: 16upx;
		margin-bottom: 10upx;
	}

	.selected {
		border: 2upx solid #333;
		background-color: #333;
		color: #fff;
	}

	.not-selected {
		border: 2upx solid #ccc;
	}

	.none {
		border: 2upx dashed #ccc;
		color: #888;
	}

	.pop-m-bd-in {
		display: inline-block;
	}

	.badge {
		top: 2upx;
		left: 62upx;
	}

	.goods-assess .user-head-img {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}

	.goods-assess .cell-item-bd {
		padding-right: 0;
	}

	.goods-assess .cell-bd-text {
		margin: 0;
	}

	.goods-assess .cell-bd-text.color-9 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 440upx;
	}

	.gai-body {}

	.gai-body-text {
		font-size: 26upx;
		color: #333;
		padding: 0 26upx;
		word-wrap: break-word;
	}

	.gai-body-img {
		overflow: hidden;
		padding: 20upx 26upx;
	}

	.gai-body-img image {
		width: 220upx;
		height: 220upx;
		float: left;
		margin-right: 19upx;
		margin-bottom: 18upx;
	}

	.gai-body-img image:nth-child(3n) {
		margin-right: 0;
	}

	.redstar {
		width: 24rpx;
		height: 24rpx;
		padding: 2rpx;
	}

	.mask-share-wechat {
		display: inline-block;
		background-color: #fff;
		padding: 0;
	}

	.mask-share-wechat:after {
		border: none;
	}

	.right-ball {
		position: fixed;
		right: 30upx;
		bottom: 300upx;
		z-index: 999;
		text-align: center;
		padding: 14upx 0;
		width: 80upx;
		height: 80upx;
		font-size: 24upx;
		color: #fff;
		background-color: rgba(0, 0, 0, .5);
		border-radius: 50%;
	}

	.comment-none {
		padding-top: 10px;
	}

	.comment-none image {
		width: 100%;
	}

	.price-salesvolume {
		width: 100%;
		padding: 0 0 0 26upx;
		overflow: hidden;
		color: #A5A5A5;
		background-color: rgb(252, 226, 80);
		position: relative;
	}

	.commodity-price {
		width: 224upx;
		display: inline-block;
		float: left;
	}

	.current-price {
		font-size: 40upx;
		color: #FF7159;
		display: block;
		line-height: 1.5;
	}

	.cost-price {
		font-size: 26upx;
		text-decoration: line-through;
		display: block;
	}

	.commodity-salesvolume {
		width: 240upx;
		display: inline-block;
		font-size: 22upx;
		float: left;
		padding: 16upx 0;
	}

	.commodity-salesvolume>text {
		display: block;
	}

	.commodity-time-img {
		display: block;
		width: 0;
		height: 0;
		border-width: 48upx 28upx 50upx 0;
		border-style: solid;
		border-color: transparent #FF7159 transparent transparent;
		/*透明 黄 透明 透明 */
		position: absolute;
		top: 0px;
		left: 462upx;
	}

	.commodity-time {
		display: inline-block;
		width: 260upx;
		text-align: center;
		font-size: 24upx;
		background-color: #FF7159;
		padding: 16upx 0 18upx;
		color: rgb(250, 233, 0);
	}

	.commodity-time>text {
		display: block;
	}

	.commodity-day {
		font-size: 22upx;
	}

	.commodity-day>text {
		display: inline-block;
		background-color: rgb(255, 212, 176);
		color: rgb(255, 115, 0);
		padding: 0 6upx;
		border-radius: 6upx;
	}

	.nav-back {
		width: 100%;
		height: 44px;
		/* #ifndef MP-WEIXIN */
		padding: 12px 12px 0;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding: 26px 12px 0;
		/* #endif */

		position: fixed;
		top: 0;
		background-color: rgba(255, 255, 255, 0);
		z-index: 98;
	}

	.back-btn {
		height: 32px;
		width: 32px;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.8);
	}

	.back-btn .icon {
		height: 20px;
		width: 20px;
		position: relative;
		top: 50%;
		left: 46%;
		transform: translate(-50%, -50%);
	}

	.seller-content {
		background-color: #f8f8f8;
		margin: 0 13px 15px;
		padding: 10px;
		color: #6e6e6e;
		border-radius: 4px;
	}

	.seller-content-top {
		font-weight: bold;
		margin-bottom: 6px;
	}

	.seller-content-img {
		width: 20px;
		height: 20px;
		vertical-align: middle;
		margin-right: 4px;
	}

	.service {
		width: 80rpx;
		height: 80rpx;
		background-color: #fff;
		border-radius: 50%;
		position: fixed;
		left: 30rpx;
		bottom: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0 10rpx #ccc;
		padding: 0;
	}

	.service .icon {
		width: 60rpx;
		height: 60rpx;
	}

	/* #ifdef MP-WEIXIN */
	.weiContact {
		background-color: #fff;
		border: none;
	}

	.weiContact::after {
		border: none;
	}

	.weiContact>view {
		position: absolute;
		top: 45rpx;
		left: 50%;
		transform: translateX(-50%);

	}

	/* #endif */
	.state {
		margin-top: 10px;
		width: 100%;
		background-color: #FFFFFF
	}

	.state .cell-item {
		border-bottom: 1px solid #EFEFF4;
	}

	.state .cell-item:last-child {
		border-bottom: none
	}

	.state .cell-hd-title {
		color: #999999;
		font-size: 13px;
	}

	.cell-item-mid {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.content {
		background-color: #F9F9F9;
	}

	.cell-item-mid image {
		width: 12px;
		height: 15px;
	}

	.romotion-tip {
		padding-left: 10px;
		color: #000000;
		font-size: 13px;
	}

	.bottom-wrapper {
		display: flex;
		flex-direction: row;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 41%
	}

	.fsz29 {
		font-size: 16px;
		font-weight: bold;
	}

	/**/
	.fenxi {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		position: absolute;
		right: 0;
		top: 20px;
		width: 69px;
		height: 22px;
		background: rgba(247, 247, 247, 1);
		border-radius: 11px 0 0 11px;
		align-items: center;
		justify-content: center;
		color: #999999;
		font-size: 12px;

	}

	.fenxi image {
		width: 13px;
		height: 16px;
	}
	
.activ-share-but{
	background: none;
	    display: flex;
	    flex-direction: column;
	    line-height: 28px;
	    align-items: center;
	    justify-content: center;
		line-height: inherit;
		 
}
</style>
